import React, { Component } from 'react';
import { Form, Input, Button, Checkbox } from 'antd';
import { UserOutlined, LockOutlined } from '@ant-design/icons';
import {connect} from 'react-redux';
import {Redirect} from 'react-router-dom';
import Cookie from 'js-cookie'

import './vendor/bootstrap/css/bootstrap.min.css'
import './fonts/font-awesome-4.7.0/css/font-awesome.min.css'
import './fonts/iconic/css/material-design-iconic-font.min.css'
import './css/util.css'
import './css/main.css'
 
import {toLogin,GetUserAPI} from '../../reudx/action'
import Cookies from 'js-cookie';

class Login extends Component {

    
    onFinish =async (event)=>{
      //数据前端验证成功，发送请求进行登录

        //发送请求
        this.props.toLogin(event.username,event.password)
    }
    /* componentWillMount(){
      const userid = Cookies.get("userid")
      if(userid){
        //发送请求去得到user的信息来判断是否能自动登录
        this.props.GetUserAPI(userid)
      }
    } */
    render() {
      //这里统一交给主页面处理数据
        const userid = Cookies.get("userid")
        if(userid){
          return <Redirect to="/"></Redirect>
        }
       
        
        return (
            <div className="limiter">
                <div className="container-login100">
                    <div className="loginTitle">后台管理系统</div>
                    <div className="wrap-login100 p-l-55 p-r-55 p-t-65 p-b-54">

                        <span className="login100-form-title p-b-49">登录</span>
{
  /*用户名/密码的的合法性要求 1). 必须输入 2). 必须大于等于 4 位 3). 必须小于等于 12 位 4). 必须是英文、数字或下划线组成 */
}
                            <Form
                              name="normal_login"
                              className="login-form"
                              initialValues={{
                                remember: true,
                              }}
                              onFinish={this.onFinish}
                            >
                              <Form.Item
                                name="username"
                                rules={[
                                  {
                                    required: true,
                                    message: 'Please input your name',
                                  },
                                  {
                                    min :4,
                                    message:'至少输入4个字符'
                                  },
                                  {
                                    max:12,
                                    message:'用户名太长'
                                  },
                                  {
                                    pattern:/^[A-Za-z0-9-_]+$/,
                                    message:'用户名必须是英文、数字或下划线组成'
                                  }
                                ]}
                              >
                              
                                <Input prefix={<UserOutlined className="site-form-item-icon " />} placeholder="用户名" />
                              </Form.Item>
                              <Form.Item
                                name="password"
                                rules={[
                                  {
                                    required: true,
                                    message: 'Please input your Password!',
                                  },
                                  {
                                    min :3,
                                    message:'至少输入3个字符'
                                  },
                                  {
                                    max:12,
                                    message:'密码太长'
                                  },
                                ]}
                              >
                                <Input.Password
                                  prefix={<LockOutlined className="site-form-item-icon" />}
                                  type="password"
                                  placeholder="密码"
                                />
                              </Form.Item>
                             
                              <Form.Item>
                                <div className="container-login100-form-btn">
                                <div className="wrap-login100-form-btn">
                                    <div className="login100-form-bgbtn"></div>
                                    <button className="login100-form-btn">登 录</button>
                                </div>
                                 </div>
                              </Form.Item>
                            </Form>
                         

                        <div className="txt1 text-center p-t-54 p-b-20">
                            <span>第三方登录</span>
                        </div>

                        <div className="flex-c-m">
                            <a href="#" className="login100-social-item bg1">
                                <i className="fa fa-wechat"></i>
                            </a>

                            <a href="#" className="login100-social-item bg2">
                                <i className="fa fa-qq"></i>
                            </a>

                            <a href="#" className="login100-social-item bg3">
                                <i className="fa fa-weibo"></i>
                            </a>
                        </div>



                        <div className="flex-col-c p-t-25">
                            <a href="#" className="txt2">立即注册</a>
                        </div>

                    </div>
                </div>
            </div>
        )
    }
}

export default connect(
  state=>({user:state.user}),
  {toLogin}
)(Login)